import React, { Component } from "react";

import { connect } from "react-redux";

const mapDispatchToProps = (dispatch) => {
  return {
    add(title) {
      dispatch({
        type: "add",
        item: { title: title, _id: new Date().getTime() },
      });
    },
  };
};

// 装饰器写在组件的前一行，前面加@符
// 装饰器只能给类组件用
@connect(null, mapDispatchToProps)
class Form extends Component {
  state = {
    value: "",
  };

  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };

  plus = () => {
    // console.log(this.state.value);
    this.props.add(this.state.value);
    this.setState({
      value: "",
    });
  };

  render() {
    return (
      <>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <button onClick={this.plus}>添加</button>
      </>
    );
  }
}

export default Form;
